<template>
  <div class="app-container">
    <el-tabs
      type="border-card"
      style="height: calc(100vh - 100px);"
    >
      <el-tab-pane :label="$t('config')">
        <div class="uni-scroll" style="height: calc(100vh - 150px);">
          <config v-if="companyId" :company-id="companyId" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('ali') +$t('sms')">
        <div class="uni-scroll" style="height: calc(100vh - 150px);">
          <ali-sms v-if="companyId" :company-id="companyId" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('domainName')">
        <div class="uni-scroll" style="height: calc(100vh - 150px);">
          <domain-name v-if="companyId" :company-id="companyId" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="'IOT'+$t('wxApp')">
        <div class="uni-scroll" style="height: calc(100vh - 150px);">
          <iot-wx-app v-if="companyId" :company-id="companyId" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="'IOT'+$t('gzh')">
        <div class="uni-scroll" style="height: calc(100vh - 150px);">
          <iot-wx-gzh v-if="companyId" :company-id="companyId" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="'IOT ' +$t('ali') +$t('sms')">
        <div class="uni-scroll" style="height: calc(100vh - 150px);">
          <iot-ali-sms v-if="companyId" :company-id="companyId" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="'极光'+$t('push')">
        <div class="uni-scroll" style="height: calc(100vh - 150px);">
          <ji-guang-push v-if="companyId" :company-id="companyId" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('device')+$t('config')">
        <div class="uni-scroll" style="height: calc(100vh - 150px);">
          <iot-config-device v-if="companyId" :company-id="companyId" />
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('device')+$t('explain')+$t('warn')+$t('config')">
        <div class="uni-scroll" style="height: calc(100vh - 150px);">
          <device-explain-warn v-if="companyId" :company-id="companyId" />
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import Config from './components/Config'
import AliSms from './components/AliSms'
import JiGuangPush from './components/JiGuangPush'
import IotAliSms from './components/IotAliSms'
import IotWxApp from './components/IotWxApp'
import IotWxGzh from './components/IotWxGzh'
import IotConfigDevice from './components/IotConfigDevice'
import DomainName from './components/DomainName'
import DeviceExplainWarn from './components/DeviceExplainWarn'

import { getCompanyId, getShortCompanyName } from '@/util/storage'

export default {
  name: 'CompanyConfig',
  components: {
    Config,
    JiGuangPush,
    AliSms,
    DomainName,
    IotAliSms,
    IotWxApp,
    IotWxGzh,
    IotConfigDevice,
    DeviceExplainWarn
  },
  data() {
    return {
      companyId: null,
      companyName: null
    }
  },
  mounted() {
    const param = this.$route.query
    if (param != null && param.companyId != null) {
      this.companyId = parseInt(param.companyId)
      this.companyName = param.companyName
    } else {
      this.companyId = parseInt(getCompanyId())
      this.companyName = getShortCompanyName()
    }
    this.setTagsViewTitle()
  },
  methods: {
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.companyName}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    }
  }
}
</script>
